<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>个人主页</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标库 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#409eff',
            secondary: '#6b7280',
            light: '#f3f4f6',
            dark: '#1f2937'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .card-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }
      .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
    }
  </style>
</head>
<body class="bg-gray-50 p-4 md:p-6">
  <!-- 顶部导航栏 -->
  <header class="navbar bg-white rounded-xl p-4 mb-6 card-shadow">
    <div class="flex justify-between items-center">
      <h1 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-dark">
        <i class="fa fa-home text-primary mr-2"></i>我的主页
      </h1>
      <nav class="hidden md:flex space-x-6">
        <a href="#" class="text-secondary hover:text-primary transition-colors">
          <i class="fa fa-user-circle mr-1"></i>账号管理
        </a>
        <a href="#" class="text-secondary hover:text-primary transition-colors">
          <i class="fa fa-star mr-1"></i>我的收藏
        </a>
        <a href="#" class="text-secondary hover:text-primary transition-colors">
          <i class="fa fa-clock-o mr-1"></i>最近使用
        </a>
      </nav>
      <button class="md:hidden text-dark">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
  </header>

  <!-- 个人信息区 -->
  <section class="profile bg-white rounded-xl p-6 mb-6 card-shadow">
    <div class="flex flex-col md:flex-row items-center">
      <!-- 个人头像 -->
      <div class="avatar mb-6 md:mb-0 md:mr-8">
        <div class="relative">
          <img src="#" alt="用户头像" 
               class="w-32 h-32 rounded-full object-cover border-4 border-primary/20"/>
          <div class="absolute -bottom-2 -right-2 bg-primary text-white rounded-full p-2 cursor-pointer hover:bg-primary/80 transition-colors">
            <i class="fa fa-camera"></i>
          </div>
        </div>
      </div>
      
      <!-- 个人信息卡片 -->
      <div class="info-container w-full">
        <!-- 个人简介图片横幅 -->
        <div class="w-full h-32 md:h-40 rounded-lg mb-6 overflow-hidden">
          <img src="https://picsum.photos/id/1048/1200/300" alt="个人封面" 
               class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"/>
        </div>
        
        <!-- 信息卡片 -->
        <div class="info-row grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div class="info-card bg-light rounded-lg p-4 flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
              <i class="fas fa-user text-primary"></i>
            </div>
            <div>
              <div class="text-xs text-secondary">姓名</div>
              <div class="font-medium">张明</div>
            </div>
          </div>
          
          <div class="info-card bg-light rounded-lg p-4 flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
              <i class="fas fa-briefcase text-primary"></i>
            </div>
            <div>
              <div class="text-xs text-secondary">角色</div>
              <div class="font-medium">学生</div>
            </div>
          </div>
          
          <div class="info-card bg-light rounded-lg p-4 flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
              <i class="fas fa-building text-primary"></i>
            </div>
            <div>
              <div class="text-xs text-secondary">学号</div>
              <div class="font-medium">2024011503**</div>
            </div>
          </div>
          
          <div class="info-card bg-light rounded-lg p-4 flex items-center">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
              <i class="fas fa-id-card text-primary"></i>
            </div>
            <div>
              <div class="text-xs text-secondary">所属部门</div>
              <div class="font-medium">软件工程系</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 功能模块区 -->
  <section class="modules bg-white rounded-xl p-6 mb-6 card-shadow">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold text-dark">
        <i class="fa fa-bell text-primary mr-2"></i>事项提醒
      </h2>
      <a href="#" class="text-primary hover:text-primary/80 text-sm transition-colors">
        查看全部 <i class="fa fa-angle-right ml-1"></i>
      </a>
    </div>
    
    <div class="module-row grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="module-card bg-light rounded-xl p-5 text-center hover-lift cursor-pointer">
        <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-blue-100 flex items-center justify-center">
          <i class="fas fa-clipboard text-blue-500 text-2xl"></i>
        </div>
        <span class="font-medium block mb-1">审批助手</span>
        <p class="text-xs text-secondary">待处理: 3项</p>
      </div>
      
      <div class="module-card bg-light rounded-xl p-5 text-center hover-lift cursor-pointer">
        <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-green-100 flex items-center justify-center">
          <i class="fas fa-tasks text-green-500 text-2xl"></i>
        </div>
        <span class="font-medium block mb-1">待办件</span>
        <p class="text-xs text-secondary">待处理: 5项</p>
      </div>
      
      <div class="module-card bg-light rounded-xl p-5 text-center hover-lift cursor-pointer">
        <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-purple-100 flex items-center justify-center">
          <i class="fas fa-comment text-purple-500 text-2xl"></i>
        </div>
        <span class="font-medium block mb-1">我的消息</span>
        <p class="text-xs text-secondary">未读: 2项</p>
      </div>
      
      <div class="module-card bg-light rounded-xl p-5 text-center hover-lift cursor-pointer">
        <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-amber-100 flex items-center justify-center">
          <i class="fas fa-history text-amber-500 text-2xl"></i>
        </div>
        <span class="font-medium block mb-1">我的流程</span>
        <p class="text-xs text-secondary">进行中: 1项</p>
      </div>
    </div>
  </section>
  <!-- 日历区 -->
  <section class="calendar bg-white rounded-xl p-6 card-shadow">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold text-dark">
        <i class="fa fa-calendar text-primary mr-2"></i>2025年10月
      </h2>
      <div class="flex space-x-2">
        <button class="w-8 h-8 rounded-full bg-light flex items-center justify-center hover:bg-gray-200 transition-colors">
          <i class="fa fa-angle-left text-secondary"></i>
        </button>
        <button class="w-8 h-8 rounded-full bg-light flex items-center justify-center hover:bg-gray-200 transition-colors">
          <i class="fa fa-angle-right text-secondary"></i>
        </button>
      </div>
    </div>
    
    <div class="calendar-header grid grid-cols-7 gap-1 text-center mb-2">
      <span class="text-sm text-secondary py-2">日</span>
      <span class="text-sm text-secondary py-2">一</span>
      <span class="text-sm text-secondary py-2">二</span>
      <span class="text-sm text-secondary py-2">三</span>
      <span class="text-sm text-secondary py-2">四</span>
      <span class="text-sm text-secondary py-2">五</span>
      <span class="text-sm text-secondary py-2">六</span>
    </div>
    
    <div class="calendar-days grid grid-cols-7 gap-1" id="calendarDays">
      <!-- 这里用JS动态生成日期 -->
    </div>
  </section>

  <script>
    // 生成日历日期
    const calendarDays = document.getElementById('calendarDays');
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth(); // 月份从0开始
    const firstDay = new Date(year, month, 1).getDay(); // 当月1号是周几（0=周日）
    
    // 补全上月的空白日期
    for (let i = 0; i < firstDay; i++) {
      const emptyDay = document.createElement('div');
      emptyDay.classList.add('h-12', 'border', 'border-gray-100', 'rounded', 'opacity-0');
      calendarDays.appendChild(emptyDay);
    }
    
    // 生成当月日期
    const daysInMonth = new Date(year, month + 1, 0).getDate(); // 当月总天数
    for (let i = 1; i <= daysInMonth; i++) {
      const day = document.createElement('div');
      day.classList.add('h-12', 'border', 'border-gray-100', 'rounded', 'flex', 'items-center', 'justify-center', 'cursor-pointer', 'hover:bg-gray-50', 'transition-colors');
      day.textContent = i;
      
      // 高亮今天
      if (i === currentDate.getDate() && month === currentDate.getMonth()) {
        day.classList.add('bg-primary', 'text-white', 'font-medium');
      }
      
      // 标记有事件的日期
      if ([5, 12, 20, 28].includes(i)) {
        const eventDot = document.createElement('div');
        eventDot.classList.add('absolute', 'w-1.5', 'h-1.5', 'bg-red-500', 'rounded-full', 'bottom-1');
        day.classList.add('relative');
        day.appendChild(eventDot);
      }
      
      calendarDays.appendChild(day);
    }
  </script>
</body>
</html>